<html>
  <head>
    <title>Orientation Checker</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximumscale=1.0; user-scalable=0;" />
    <link rel="stylesheet" media="screen" href="../css/base.css" />
    <script src="../js/lib/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../js/orientation-monitor.js"></script>    
  </head>
  <body>
    <h1 class="fancy">Orientation Monitor</h1>
    <ul class="details">
      <li class="header">Event Details</li>
      <li><label>Type:</label><span id="event-type">[not rotated yet]</span></li>
      <li class="header">Window Details</li>
      <li><label>Width:</label><span id="window-width">[not rotated yet]</span></li>
      <li><label>Height:</label><span id="window-height">[not rotated yet]</span></li>
      <li><label>Orientation:</label><span id="window-orientation">[not rotated yet]</span></li>
      <li class="header">Detection Results</li>
      <li><label>Orientation:</label><span id="orientation" >[not rotated yet]</span></li>
      <li><label>Rotation Class:</label><span id="rotation-class">[not rotated yet]</span></li>
    </ul>
  </body>
</html>
<script>
window.scrollTo(0,1);

</script>